<!-- 文件展示列表 -->
<template>
  <div class="demo-file-list-group">
    <!--  checked=[]则文件夹不能删除，但现在复选框按钮。为不存在，则文件夹和子级都不能展示复选框  -->
    <!--    :checked="directorys.length>1 ? checked :[]"  -->
    <!--    :checked=" {checked : directorys.length>1} "-->
    <!--    :checked="directorys.length>1==true ? checked :''" —— 最新修改 -->
    <!--    <div>checked===={{checked.length}}</div>-->

    <!--    <el-tooltip effect="dark" content="双击进入文件夹" placement="bottom" v-if="data.length">-->
    <!--<div>
      icons:{{icons}}===smIcons:{{smIcons}}
    </div>-->


    <ele-file-list
      :class="directorys.length >0 ? 'list-cls' :''"
      v-if="data.length"
      :data="data"
      :grid="grid"
      :sort="sort"
      :order="order"
      :checked="checked"
      :icons="icons"
      :sm-icons="smIcons"
      :style="{ minHeight: '600px', minWidth: grid ? 'auto' : '456px' }"
      @item-click="onItemClick"
      @sort-change="onSortChange"
      @update:checked="updateChecked"
      @item-context-menu="onCtxMenuClick"
    >
      <!-- 1:视频 2:音频 3:台本 4:图片 -->
      <!--  右击弹框 -->
      <!--      directorys.length >1 代表非文件夹的文件-->
      <template v-slot:context-menu="{ item }" v-if="typeId==3 && directorys.length >=1">
        <!--有媒资id则禁用，否则可以修改-->
        <el-dropdown-item
          command="txtedit"
          icon="el-icon-edit"
          :divided="item.isDirectory"
          :disabled="item.deleteFlag!=0 && 'content' in item ? false : true"
        >
          编辑
        </el-dropdown-item>
        <el-dropdown-item command="removetext" icon="el-icon-delete"
                          :disabled="'content' in item ? false : true">
          删除
        </el-dropdown-item>
      </template>
      <template v-slot:context-menu="{ item }" v-else>
        <!--等于1视频，打开可以直接预览，图片则会直接跳转保存-->
        <el-dropdown-item command="open" :icon="typeId==1?'el-icon-view':''">{{typeId==1?'预览':'打开'}}</el-dropdown-item>
        <el-dropdown-item
          command="edit"
          icon="el-icon-edit"
          :divided="item.isDirectory"
          v-if="item.deleteFlag!=0 && item.isDirectory==1 &&parentId!=0"
        >
          编辑
        </el-dropdown-item>
        <el-dropdown-item command="preview" icon="el-icon-view" divided v-if="typeId==4 && item.isDirectory==false">
          预览
        </el-dropdown-item>
        <!-- <el-dropdown-item command="move" icon="el-icon-rank" divided>
           移动到
         </el-dropdown-item>-->
        <!--公共文件夹不可删除:disabled="item.isCommon==1 ? true : false"-->

        <el-dropdown-item command="remove" icon="el-icon-delete"
                          :disabled="item.deleteFlag==0 ? true : false" >
          <!-- deleteFlag：0 不可删除文件夹标识 -->
          删除
        </el-dropdown-item>
      </template>
    </ele-file-list>
    <!--    </el-tooltip>-->

    <div v-else class="demo-file-list-empty">
      <ele-empty />
    </div>
    <!-- 用于图片预览 -->
    <div style="display: none">
      <el-image
        ref="previewRef"
        v-if="previewOption.visible"
        :src="previewOption.current"
        :preview-src-list="previewImages"
      />
    </div>
    <!-- 文件编辑弹窗 -->
    <name-edit
      :parentId="parentId"
      :visible.sync="nameEditVisible"
      :data="nameEditData"
      @done="onDone"
    />
    <!-- 台本编辑弹窗 -->
    <file-text
      :parentId="parentId"
      :visible.sync="fileTextVisible"
      :data="fileTextData"
      @done="onDone"
    />
    <!--预览图片-->
    <preview-img
      :visible.sync="previewVisible"
      :data="previewData"
      @done="onDone"
    ></preview-img>
    <!--移动到-->
    <move-file
      :visible.sync="moveVisible"
      :data="moveData"
      :moveFileAll="moveFileAll"
      @done="onDone"
    ></move-file>

    <!--查看视频-->
    <look-video
      :visible.sync="videoVisible"
      :videoUrl="videoUrl"
      ref="videoRef"
    >
    </look-video>
  </div>
</template>

<script>
  import {icons,smIcons} from 'ele-admin/es/ele-file-list/icons'
  import EleFileList from 'ele-admin/es/ele-file-list';
  import NameEdit from './name-edit.vue';
  import fileText from './file-text.vue';
  import previewImg from './preview-img.vue';
  import moveFile from './move-file.vue';
  import {
    batchDelete,
    updateFolder,
    batchDeleteFile,
    batchTxtDelete,
    loadById,
    listUserFiles
  } from '@/api/creatCenter/material';
  import FileText from "@/views/creatCenter/material/components/file-text";
  import LookVideo from "@/views/creatCenter/piecemeal/components/look-video";
  export default {
    components: {LookVideo, FileText, EleFileList, NameEdit,fileText, previewImg, moveFile },
    props: {
      // 文件夹数据 （新增传参）
      directorys: Array,
      typeId: Number,
      // 父级 id
      parentId: Number,
      // 文件列表数据
      data: Array,
      // 排序字段
      sort: String,
      // 排序方式
      order: String,
      // 选中数据
      checked: Array,
      // 是否网格展示
      grid: Boolean
    },
    //icon:d.icon.replace('public/ele-file-list/')
    // 将文件类型显示图，改为本地
    data() {
      return {
        icons: icons.map((d) =>{
          return{
            ...d,
            icon:d.icon.replace('https://cdn.eleadmin.com/20200609/','/ele-file-list/')
          }
        }),
        smIcons: smIcons.map((d) =>{
          return{
            ...d,
            icon:d.icon.replace('https://cdn.eleadmin.com/20200609/','/ele-file-list/')
          }
        }),
        // 图片预览列表
        previewImages: [],
        // 图片预览配置
        previewOption: {
          visible: false,
          current: null
        },
        // 文件重命名弹窗是否打开
        nameEditVisible: false,
        // 台本
        fileTextVisible:false,
        // 预览图片
        previewVisible:false,
        // 预览视频
        videoVisible:false,
        // 移动文件
        moveVisible:false,
        // 文件重命名的数据
        nameEditData: null,
        fileTextData: null,
        previewData: null,
        moveData: null,
        moveFileAll: [],
        selectList:[], // 选中的数据
        videoUrl:''//预览的视频url

      };
    },
    created() {
      console.log("文件图标=======,this.icons",this.icons,'smIcons',this.smIcons)
      console.log('created========grid=====',this.grid,'checked',this.checked,'data',this.data,'typeId',this.typeId)
    },
    methods: {
      /* 文件列表排序方式改变 */
      onSortChange(option) {
        this.$emit('sort-change', option);
      },
      /* 更新选中数据 */
      updateChecked(value) {
        this.selectList=this.checked.length>0?this.checked:value
        /*console.log('进入选择文件夹')
        if(this.directorys.length<=1){
          return
        }*/

        // 是否公共文件夹  0否，1是
        // isCommon:'',
        this.$emit('update:checked', value);

        console.log("更新选中数据value2345--------",value,'this.checked',this.checked,'value.length',value.length,'this.selectList',)
        return
        // console.log("更新选中数据value2345--------",value,'this.checked',this.checked,'value.isCommon',value[0].isCommon)
        /* for(let i=0;i<value.length;i++){

         }*/
        // let end =value.length-1
        /*if(value[end].isCommon==0){
          console.log('value[0].isCommon==0',value[end].isCommon)
          this.$emit('update:checked', value);
        }*/
        // this.$emit('update:checked', value);

        // 如果是公共文件夹，那么directorys.length==1，则是文件存放的地方，个人文件夹则是>1，才是文件存在的地方
        if(this.directorys.length>1 || this.directorys.length==1 && this.directorys[0].isCommon ==1 ){
          console.log("1111111")
          this.$emit('update:checked', value);
        }
        else{
          //isCommon=0, 非公共文件夹
          console.log("value.filter((d)=> d.isCommon==0)",value.filter((d)=> d.isCommon==0))
          value=value.filter((d)=> d.isCommon==0)
          console.log("value111111",value)
          this.$emit('update:checked', value);

          /*console.log("2222222")
          this.$emit('update:checked', value.filter((d)=> d.isCommon==0));*/
        }

        /*value.filter(i => {
          //当字段deleteFlag=0时，表示该文件夹不可删除
          if (i.deleteFlag != 0) {
            this.$emit('update:checked', value);
          }
        });*/
      },
      /* item 点击事件 */
      onItemClick(item) {
        console.log("点击item======",item)
        if (item.isDirectory) {
          // 点击进入文件夹
          this.$emit('go-directory', item);
          console.log("进入文件夹", item)
        }
        else if(this.parentId>0){
          this.videoUrl=item.url
          this.videoVisible=true
          this.$nextTick(()=>{
            this.$refs['videoRef'].show()
          })
          // 点击视频进入
          // window.open(item.url)
          // window.open(url + '&from=' + location.href)
          // location.href=item.url
        }
        // 图片点击预览
        else if (this.isImageFile(item)) {
          // 预览图片文件
          this.previewItemImage(item);
        } else {
          console.log('选中或取消选中文件checked2222222222----------' , this.checked,'点击事件item',item)
          // 选中或取消选中文件
          this.updateChecked(
            this.checked.includes(item)
              ? this.checked.filter((d) => d !== item)
              : [...this.checked, item]
          );
        }
      },
      /* 右键菜单点击事件 */
      onCtxMenuClick({ key, item }) {
        if (key === 'open') {
          // 打开文件
          if (item.isDirectory || this.isImageFile(item)) {
            this.onItemClick(item);
          } else {
            window.open(item.url);
          }
        } else if (key === 'download') {
          // 下载文件
          if (typeof item.downloadUrl === 'string') {
            window.open(item.downloadUrl);
          }
        } else if (key === 'edit') {
          // 重命名
          this.nameEditData = item;
          this.nameEditVisible = true;
        }
        else if (key === 'preview') {
          // 重命名
          this.previewData = item;
          this.previewVisible = true;
        }
        else if (key === 'move') {
          // 移动/剪切 文件
          this.moveVisible = true;
          // this.directorys.length - 2 ： 获取前2个文件夹id
          this.userFile(this.directorys[this.directorys.length - 2]?.id,item.id)
          console.log('this.directorys.length - 2',this.directorys)
          this.moveData = item;
          console.log('this.moveData',this.moveData)
        }
        else if (key === 'remove') {
          // 删除文件
          this.removeItem(item);
        }
        else if (key === 'removetext') {
          // 删除文件
          this.removeTextItem(item);
        }
        else if(key==='txtedit'){
          this.loadByIds(item);
        }
      },
      userFile(parentId,id){
        //用户所创建的文件
        listUserFiles({
          name:this.search,
          // 是否公共文件夹  0否，1是
          isCommon:'',
          //查公共文件根目录不需要传，子级需要
          username: this.$store.state.user.info.username,
          //父级目录：初次传0
          parentId: parentId
        })
          .then((data) => {
            console.log('移动data文件夹数据=----------------',data,'id',id)
            /* type 1:视频 2:音频 3:台本 4:图片*/
            this.moveFileAll = data.filter((x)=>{
              return x.type == 4
            })
            console.log('this.moveFileAll', this.moveFileAll)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      //编辑台本文件
      loadByIds(item){
        loadById({
          id: item.id
        })
          .then((data) => {
            this.fileTextData = data.data;
            this.fileTextVisible = true;
            console.log("父组件this.fileTextData",this.fileTextData)
            this.onDone();
          })
          .catch((data) => {
            this.$message.error(data.msg);
          });
      },
      /*移动/剪切 文件*/
      shiftItem(item){
        const loading = this.$messageLoading('请求中..');
        updateFolder({
          ids: [item.id],   // 文件ID数组
          folderId: 0    // 移动到的文件ID
        })
          .then((msg) => {
            loading.close();
            this.$message.success(msg);
            this.onDone();
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e);
          });
      },
      /* 删除文件夹 */
      removeItem(item) {
        this.$confirm('确定要删除此文件吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            const loading = this.$messageLoading('请求中..');
            if(this.typeId==0 || !this.typeId){
              // 批量删除文件夹（单个删除通用）
              batchDelete({
                ids: [item.id]
              })
                .then((msg) => {
                  loading.close();
                  this.$message.success(msg);
                  this.onDone();
                })
                .catch((e) => {
                  loading.close();
                  this.$message.error(e.message);
                });
            }
            else{
              batchDeleteFile({
                ids: [item.id]
            })
                .then((msg) => {
                  loading.close();
                  this.$message.success(msg);
                  this.onDone();
                })
                .catch((e) => {
                  loading.close();
                  this.$message.error(e.msg);
                });}

          })
          .catch(() => {});
      },
      /* 删除台本 */
      removeTextItem(item) {
        this.$confirm('确定要删除此台本吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            const loading = this.$messageLoading('请求中..');
            batchTxtDelete({
              username:this.$store.state.user.info.username,
              ids:[item.id]
            })
              .then((msg) => {
                loading.close();
                this.$message.success(msg);
                this.onDone();
              })
              .catch((e) => {
                loading.close();
                this.$message.error(e.message);
              });
          })
          .catch(() => {});
      },
      /* 删除文件夹下的文件 */
      removeItem2(item) {
        this.$confirm('确定要删除此文件吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            const loading = this.$messageLoading('请求中..');
            batchDeleteFile({
              ids: [item.id]
            })
              .then((msg) => {
                loading.close();
                this.$message.success(msg);
                this.onDone();
              })
              .catch((e) => {
                loading.close();
                this.$message.error(e.message);
              });
          })
          .catch(() => {});
      },

      /* 完成刷新列表数据 */
      onDone() {
        this.$emit('done');
      },
      /* 判断是否是图片文件 */
      isImageFile(item) {
        // 截取？后的值
        var spliceLength2 = (item.name).lastIndexOf(".")
        var name = (item.name).slice(spliceLength2 + 1);
        let type="jpg,jpeg,png"
        // console.log("name",name,'type.indexOf(name)',type.indexOf(name))
        if (type.indexOf(name) > 0) {
          console.log("判断是否是图片文件item.url",item.url)
          return (
            item.url.split('?')[0]
          );
        }
      },
      // 预览图片
      previewItemImage(item) {
        this.previewImages = this.data.filter((d) => this.isImageFile(d)).map((d) => d.url.split('?')[0]);
        console.log('this.previewImages================',this.previewImages)
        // this.previewImages=this.previewImages.split('?')[0]
        this.previewOption.current = item.url.split('?')[0];
        this.previewOption.visible = true;
        this.$nextTick(() => {
          if (this.$refs.previewRef) {
            this.$refs.previewRef.showViewer = true;
          }
        });
      }
    }
  };
</script>

<!--成片管理——二级，视频网格展示，样式修改-->
<style scoped lang="less">
  /*添加图片*/
  /deep/ .list-cls .ele-file-list .ele-file-list-body .ele-file-list-item:before{
    /*display: none;*/

    /*需展示start*/
    /*position: absolute;
    top: 6px;
    left: 4px;
    z-index: 8999;
    content:"矩阵发布占用中";//设置空文本内容
    color:#fff;
    padding: 5px 10px;
    border-radius: 0 40px 40px 0;
    background:#1890ff;//设置图片路径和不重复显示*/
    /*需展示end*/

    /*display:inline-block;//将伪元素设成块级元素*/
    /*width:30px;//设置图片宽度*/
    /*height:30px;//设置图片高度*/
    /*background:url(../images/icon.png) no-repeat;//设置图片路径和不重复显示*/

    background-size:cover;//设置背景图像的大小
    margin-right:5px;//设置图片与文本的间距
  }
 /deep/ .list-cls .ele-file-list .ele-file-list-body .ele-file-list-item{
   /*width: 320px !important;*/
   width: calc(20% - 14px) !important;
 }

 /deep/ .list-cls .ele-file-list .ele-file-list-item .ele-file-list-item-icon{
   height: 200px !important;
 }
   /deep/ .list-cls img{
     border-radius: 10px !important;
     width: 100% !important;
     height: 100% !important;
 }
 /*  /deep/ .list-cls img{
      width: 320px !important;
      height: 500px !important;
  }*/
</style>
